<template>
  <div v-loading="loading" class="label_management">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-row>
        <el-col :span="8" :gutter="8">
          <el-form-item label="标签名称">
            <el-input
              v-model="searchForm.labelName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="btn_group">
          <el-button @click="onReset">重置</el-button>
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="tool_bar">
      <span></span>
      <span class="add_btn">
        <el-button type="primary" @click="onOpenAddLabelDialog"
          >增加标签</el-button
        >
      </span>
    </div>
    <div class="result">
      <el-table :data="tableData" border style="width: 100%" max-height="600">
        <el-table-column type="index" width="50" />
        <el-table-column prop="labelName" label="标签名" />
        <el-table-column prop="operator" label="操作" width="400">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="onEdit(scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="onDelete(scope.row.id.toString())"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pager.currentPage"
        v-model:page-size="pager.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, ->, prev, pager, next, jumper, sizes"
        :total="pager.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <tags-dialog
      v-model:show="dialogShow"
      :param="editParam"
      @refresh="onSearch"
    ></tags-dialog>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {
  selectLabelPage,
  createLabel,
  updateLabel,
  deleteLabel,
} from "@/network/api";
import TagsDialog from "./components/TagsDialog.vue";

const searchForm = reactive({
  labelName: "",
});

const pager = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});

const loading = ref(false);
const dialogShow = ref(false);
const editParam = ref(null);

const tableData = ref([]);
const onReset = () => {
  searchForm.labelName = "";
  onSearch();
};
const onSearch = () => {
  pager.currentPage = 1;
  requestData();
};

const handleSizeChange = (size) => {
  pager.pageSize = size;
  pager.currentPage = 1;
  requestData();
};
const handleCurrentChange = (cur) => {
  pager.currentPage = cur;
  requestData();
};

const requestData = () => {
  loading.value = true;
  selectLabelPage({
    labelName: searchForm.labelName,
    size: pager.pageSize,
    current: pager.currentPage,
  })
    .then((res) => {
      if (res?.data) {
        pager.total = res.data.total;
        tableData.value = res.data.records || [];
      } else {
        pager.total = 0;
        tableData.value = [];
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const onOpenAddLabelDialog = () => {
  dialogShow.value = true;
  editParam.value = null;
};
const onEdit = (row) => {
  dialogShow.value = true;
  editParam.value = { ...row };
};
const onDelete = (id) => {
  deleteLabel({
    labelId: id,
  }).then((res) => {
    if (res?.code === 200) {
      // 删除成功
      ElMessage({
        message: "delete success",
        type: "success",
      });
      onSearch();
    } else {
      // 删除失败
      ElMessage({
        message: "delete failed",
        type: "error",
      });
    }
  });
};
onMounted(() => {
  onSearch();
});
</script>
<style lang="scss" scoped>
.label_management {
  .btn_group {
    text-align: center;
  }
  .tool_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .result {
    margin-top: 12px;
  }
  :deep(.el-pagination) {
    width: 100%;
    margin: 10px 0 12px;
  }
}
</style>
